<template>
	<view class="">
		<view v-if="withdrawConfig.withdraw_package == 1" class="coin-conversion">
			<view class="stats">
				<view class="stats-item">
					<view class="stats-title">我的{{ fenxiaoWords.account }}</view>
					<view class="stats-value">{{fenxiaoInfo.account}}</view>
				</view>
				<view class="stats-item">
					<view class="stats-title">我的数字资产</view>
					<view class="stats-value">{{fenxiaoInfo.point}}</view>
				</view>
			</view>
			<view class="sets">
				<view class="sets-head">
					<view class="sets-title">{{ fenxiaoWords.account }}加速{{ fenxiaoWords.withdraw }}</view>
					<view class="sets-link" @click="$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list')">查看{{ fenxiaoWords.withdraw }}记录</view>
				</view>
				<!-- 转换列表 -->
				<view class="set-list">
					<!-- 转换套餐 -->
					<view class="set-item" :class="{selected:packageId == item.id}" v-for="item in packlist" :key="item.id"
						@click="selectPackage(item.id)">
						<view class="set-value">¥{{item.money}}</view>
						<view class="set-consume">
							<view class="flex-left">
								<view class="set-consume-icon coin" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/rebate/icon-gold-coin.png') + ')' }"></view>
								<view class="set-consume-name">消耗{{ fenxiaoWords.account }}</view>
							</view>
							<view class="set-consume-value">{{item.account}}</view>
						</view>
						<view class="set-consume">
							<view class="set-consume">
								<view class="set-consume-icon point" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/rebate/icon-point.png') + ')' }"></view>
								<view class="set-consume-name">消耗数字资产加速</view>
							</view>
							<view class="set-consume-value">{{item.point}}</view>
						</view>
					</view>
				</view>
				<button class="butt butt-red-fill" type="default" :disabled="!packageId" @click="withdraw"> 立即{{ fenxiaoWords.withdraw }}</button>
			</view>
			<view class="description">
				<view class="description-title">{{withdrawConfig.withdraw_title}}</view>
				<view class="description-content">
					<rich-text :nodes="withdrawConfig.withdraw_content" @click="showImg($event)" :data-nodes="withdrawConfig.withdraw_content"></rich-text>
				</view>
			</view>
		</view>
		<view v-else class="container" :data-theme="themeStyle">
			<view class="empty-box"></view>
			<view class="withdraw-wrap">
				<view class="title">{{ fenxiaoWords.account }}将{{ fenxiaoWords.withdraw }}成数字资产</view>
				<view class="money-wrap">
					<text class="unit">{{ $lang('common.currencySymbol') }}</text>
					<input type="digit" class="withdraw-money" v-model="withdrawMoney" />
				</view>
				<view class="bootom">
					<view>
						<text class="color-tip">
							可{{ fenxiaoWords.withdraw }}{{ fenxiaoWords.account }}：{{ $lang('common.currencySymbol') }}{{ fenxiaoInfo.account | moneyFormat }}
						</text>
					</view>
				</view>
			</view>
			<view class="desc">
				<text>最小{{ fenxiaoWords.withdraw }}金额为{{ $lang('common.currencySymbol') }}{{ withdrawConfig.withdraw | moneyFormat }}</text>
			</view>
			<view class="btn color-base-bg color-base-border" :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 }" @click="withdraw">
				{{ fenxiaoWords.withdraw }}到数字资产
			</view>
			<view class="withdraw-list btn" @click="$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list')">
				<view class="color-tip">{{ fenxiaoWords.withdraw + '明细' }}</view>
			</view>
		
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
import globalConfig from '@/common/js/golbalConfig.js';
export default {
	data() {
		return {			
			packlist: [],
			packageId: '',
			fenxiaoInfo: {
				account: 0
			},
			withdrawConfig: {
				withdraw: 0,
				withdraw_package: 1
			},
			withdrawMoney: '',
			isSub: false
		};
	},
	components: {},
	mixins: [fenxiaoWords, globalConfig],
	onShow() {
		if (!this.addonIsExit.fenxiao) {
			this.$util.showToast({
				title: '商家未开启分销',
				mask: true,
				duration: 2000
			});
			setTimeout(() => {
				this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
			}, 2000);
			return;
		}
		// 刷新多语言
		this.$langConfig.refresh();
		this.$langConfig.title(this.fenxiaoWords.withdraw);

		if (uni.getStorageSync('token')) {
			this.getFenxiaoInfo();
			this.getWithdrawConfig();
		} else {
			this.$util.redirectTo('/otherpages/login/login/login', {
				back: '/otherpages/fenxiao/withdraw_apply/withdraw_apply'
			});
		}
	},
	methods: {
		selectPackage(id) {
			this.packageId = id;
		},
		getPackageList() {
			this.$api.sendRequest({
				url: '/fenxiao/api/package/lists',
				success: res => {
					if (res.code >= 0) {
						this.packlist = res.data;
					}
				}
			});
		},
		withdraw() {
			if (this.verify()) {
				if (this.isSub) return;
				this.isSub = true;

				// #ifdef MP-WEIXIN
				// this.subscribeMessage(() => {
					this.$api.sendRequest({
						url: '/fenxiao/api/withdraw/apply',
						data: {
							money: this.withdrawMoney,
							package_id: this.packageId
						},
						success: res => {
							if (res.code >= 0) {
								this.$util.showToast({
									title: '申请成功'
								});
								setTimeout(() => {
									this.$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list', {}, 'redirectTo');
								}, 1500);
							} else {
								this.isSub = false;
								this.$util.showToast({ title: res.message });
							}
						},
						fail: res => {
							this.isSub = false;
						}
					});
				// });
				// #endif

				// #ifndef MP-WEIXIN
				this.$api.sendRequest({
					url: '/fenxiao/api/withdraw/apply',
					data: {
						money: this.withdrawMoney,
						package_id: this.packageId
					},
					success: res => {
						if (res.code >= 0) {
							this.$util.showToast({
								title: '申请成功'
							});
							setTimeout(() => {
								this.$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list', {}, 'redirectTo');
							}, 1500);
						} else {
							this.isSub = false;
							this.$util.showToast({ title: res.message });
						}
					},
					fail: res => {
						this.isSub = false;
					}
				});
				// #endif
			}
		},
		verify() {
			if (this.withdrawConfig.withdraw_package == 1) {
				
			} else {
				if (this.withdrawMoney == '' || this.withdrawMoney == 0 || isNaN(parseFloat(this.withdrawMoney))) {
					this.$util.showToast({ title: '请输入提现金额' });
					return false;
				}
				if (parseFloat(this.withdrawMoney) > parseFloat(this.fenxiaoInfo.account)) {
					this.$util.showToast({ title: '提现金额超出可提现金额' });
					return false;
				}
				if (parseFloat(this.withdrawMoney) < parseFloat(this.withdrawConfig.withdraw)) {
					this.$util.showToast({ title: '提现金额小于最低提现金额' });
					return false;
				}
			}
			return true;
		},
		/**
		 * 获取佣金提现配置
		 */
		getWithdrawConfig() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/withdraw',
				success: res => {
					if (res.code >= 0) {
						this.withdrawConfig = res.data;
						if (this.withdrawConfig.withdraw_package == 1) {
							this.getPackageList();
						}
					}
				}
			});
		},
		/**
		 * 获取分销商信息
		 */
		getFenxiaoInfo() {
			this.$api.sendRequest({
				url: '/fenxiao/api/fenxiao/detail',
				success: res => {
					if (res.code >= 0 && res.data) {
						this.fenxiaoInfo = res.data;
						this.$refs.loadingCover.hide();
					} else {
						this.$util.redirectTo('/otherpages/fenxiao/apply/apply');
					}
				}
			});
		},
		/**
		 * 微信订阅消息
		 */
		subscribeMessage(callback) {
			this.$api.sendRequest({
				url: '/weapp/api/weapp/messagetmplids',
				data: {
					keywords: 'FENXIAO_WITHDRAWAL_SUCCESS,FENXIAO_WITHDRAWAL_ERROR'
				},
				success: res => {
					if (res.code == 0 && res.data.length) {
						uni.requestSubscribeMessage({
							tmplIds: res.data,
							fail: res => {
								console.log('fail', res);
							},
							complete: () => {
								callback();
							}
						});
					} else {
						callback();
					}
				},
				fail: res => {
					callback();
				}
			});
		}
	},
	filters: {
		/**
		 * 金额格式化输出
		 * @param {Object} money
		 */
		moneyFormat(money) {
			return parseFloat(money).toFixed(2);
		}
	},
	onReady() {

	}
};
</script>

<style lang="scss">
@import './style.scss';	
.container {
	width: 100vw;
	min-height: 100vh;
	background: $color-bg;
	
	.align-right {
		text-align: right;
	}
	
	.withdraw-wrap {
		margin: 20rpx 30rpx 0;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	
		.title {
			font-size: $font-size-base;
			color: $color-tip;
		}
	
		.money-wrap {
			padding: 20rpx 0;
			border-bottom: 1rpx solid $color-line;
			display: flex;
			.unit {
				font-size: 60rpx;
				line-height: 1;
			}
			.withdraw-money {
				height: 60rpx;
				line-height: 1;
				min-height: 60rpx;
				padding-left: 20rpx;
				font-size: 60rpx;
				flex: 1;
				font-weight: 500;
				vertical-align: middle;
			}
		}
	
		.bootom {
			display: flex;
			padding-top: 30rpx;
	
			& > view {
				font-size: $font-size-base;
				line-height: 1;
				flex: 1;
			}
		}
	}
	
	.btn {
		margin: 0 30rpx;
		margin-top: 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: #fff;
		text-align: center;
	
		&.disabled {
			background: #ccc;
			border-color: #ccc;
			color: #fff;
		}
	}
	
	.desc {
		margin: 20rpx 40rpx;
		font-size: $font-size-tag;
		color: $color-tip;
	}
	
	.withdraw-list {
		border: 2rpx solid $color-disabled;
		text-align: center;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

</style>
